<template>
  <div class="recommend_item">
    <span
      @click="moveShowRecommendVideoList('0')"
      v-if="this.isShowLeftButtom"
      class="left_buttom move"
      ><i class="el-icon-arrow-left"></i
    ></span>
    <span
      @click="moveShowRecommendVideoList('1')"
      v-if="isShowRightButtom"
      class="right_buttom move"
      ><i class="el-icon-arrow-right"></i
    ></span>
    <div class="video_list" :style="{ width: this.videoListWidth }">
      <div
        v-for="(i, index) in showRecommendVideoList"
        :key="i.id"
        class="video_item"
        @click="link()"
        @mouseenter="mouseover($event, i, index)"
      >
        <div
          :style="{ 'background-image': 'url(' + i.coverImg + ')' }"
          class="video_coverImg"
        ></div>
        <div class="video_item_bottom">
          <span>{{ i.name }}</span>
        </div>

        <!-- <div style="margin-top: 10px">
          <span style="font-weight: 600px">{{ i.name }}</span>
        </div> -->
      </div>

      <div
        @mouseleave="mousemove()"
        class="hover"
        @click="link()"
        :style="{ top: this.hoverVideoTop, left: this.hoverVideoLeft }"
        v-if="this.hoverVideo != null"
      >
        <div style="width: 100%; height: 100%">
          <img style="width: 100%; height: 100%" :src="hoverVideo.coverImg" />
        </div>
        <div class="video_item_bottom_hover">
          <span>{{ hoverVideo.name }}</span>
        </div>
        <div class="slider_figure_btn" _stat="焦点图:大家在追:播放按钮">
          立即观看
        </div>
        <!-- <div class="hover_content">
          <router-link to="/" class="title">{{
            this.hoverVideo.name
          }}</router-link>
          <div class="labels">
            <span class="label">2018</span>
          </div>
          <div class="synopsis">
            <span style="color: #111">简介:</span>
            <span> {{ this.hoverVideo.synopsis }}</span>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getHotList } from "@/api/video";
export default {
  created() {
    this.initRecommendVideoList();
  },
  watch: {
    currentIndex() {
      this.isShowMoveButton();
      this.checkShowRecommendVideoList();
    },
    moveSize() {
      this.isShowMoveButton();
      this.checkShowRecommendVideoList();
    },
    // screenWidth() {
    //   this.initShowSize();
    // },
  },
  mounted() {
    //监听浏览器窗口大小变化
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  data() {
    return {
      currentIndex: 0,
      moveSize: 3,
      videoListWidth: "",
      screenWidth: document.body.clientWid,
      isShowLeftButtom: false,
      isShowRightButtom: true,
      showRecommendVideoList: [],
      recommendVideoList: [],
      hoverVideo: null,
      hoverVideoTop: "0px",
      hoverVideoLeft: "0px",
    };
  },
  methods: {
    initShowSize() {
      const maxMoveSize = 4;
      const minMoveSize = 2;
      var moveSize = parseInt(this.screenWidth / 240) - 1;
      if (moveSize > maxMoveSize) {
        moveSize = maxMoveSize;
      } else if (moveSize < minMoveSize) {
        moveSize = minMoveSize;
      }
      this.moveSize = moveSize;
      this.videoListWidth = 240 * (moveSize + 1) + "px";
    },
    link() {
      this.$router.push("/play/" + this.hoverVideo.id);
    },
    initRecommendVideoList() {
      getHotList().then((v) => {
        this.recommendVideoList = v.data;
        this.checkShowRecommendVideoList();
        // this.initShowSize();
      });
    },
    checkShowRecommendVideoList() {
      var obj = JSON.parse(JSON.stringify(this.recommendVideoList));
      let endIndex = this.currentIndex + this.moveSize;
      if (this.recommendVideoList.length - 1 < endIndex) {
        endIndex = this.recommendVideoList.length - 1;
      }
      const a = obj.slice(this.currentIndex, endIndex + 1);
      this.showRecommendVideoList = a;
    },
    isShowMoveButton() {
      // 左移按钮
      if (this.currentIndex + 1 - this.moveSize > 0) {
        // if (!this.isShowLeftButtom) {
        this.isShowLeftButtom = true;
        // }
      } else {
        // if (this.isShowLeftButtom) {
        this.isShowLeftButtom = false;
        // }
      }
      // 右移按钮
      if (this.currentIndex < this.recommendVideoList.length - this.moveSize) {
        // if (!this.isShowRightButtom) {
        this.isShowRightButtom = true;
        // }
      } else {
        // if (this.isShowRightButtom) {
        this.isShowRightButtom = false;
        // }
      }
    },
    moveShowRecommendVideoList(type) {
      if (type === "0") {
        //左移
        // if (this.currentIndex + 1 - this.moveSize > 0) {
        this.currentIndex = this.currentIndex - this.moveSize;
        // }
      } else {
        // 右移
        // if (this.currentIndex < this.recommendVideoList.length-1-this.moveSize) {
        this.currentIndex = this.currentIndex + this.moveSize;
        // }
      }
    },
    mouseover(e, i) {
      if (this.hoverVideo === null) {
        this.hoverVideoLeft = e.path[0].offsetLeft - 20 + "px";
        this.hoverVideoTop = e.path[0].offsetTop - 15 + "px";
        this.hoverVideo = i;
      }
    },
    mousemove() {
      this.hoverVideo = null;
    },
  },
};
</script>

<style lang="scss" scoped>
@media (max-width: 1280px) {
  .recommend_item {
    .video_item {
      width: 210px !important;
      height: 274px !important;
    }
    .hover {
      width: 250px !important;
      height: 310px !important;
    }
  }
}
.recommend_item {
  // position: absolute;
  -webkit-mask: linear-gradient(
      270deg,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0.1) 370px,
      rgba(0, 0, 0, 0.8) 440px,
      #000
    )
    right top;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .left_buttom {
    position: absolute;
    left: 6%;
  }
  .right_buttom {
    position: absolute;
    right: 26%;
  }
  .move {
    margin-top: 239px;
    font-size: 38px;
    z-index: 150;
    width: 46px;
    height: 46px;
    border-radius: 100%;
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
  }
  .move:hover {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ff5c38;
  }
  .video_list {
    padding-left: 9%;
    height: 400px;
    padding-top: 100px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    .video_item_bottom {
      padding-left: 15px;
      position: absolute;
      bottom: 20px;
      color: #fff;
      font-size: 18px;
    }
    .video_item_bottom_hover {
      color: #fff;
      font-size: 18px;
      position: absolute;
      bottom: 30px;
      margin-left: 15px;
    }

    .hover {
      width: 300px;
      height: 394px;
      position: absolute;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 28px 50px rgba(25, 24, 40, 0.35);
      z-index: 10;
      transition: -webkit-transform 0.2s ease;
      transition: transform 0.2s ease;
      transition: transform 0.2s ease, -webkit-transform 0.2s ease;
      .slider_figure_btn {
        position: absolute;
        bottom: 10px;
        right: 20px;
        width: 80px;
        height: 32px;
        background: url(../../image/btn_view_sprite.svg) 0 0 no-repeat;
        color: #fff;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
      }

      .hover_content {
        width: 100%;
        height: 50%;
        background: #fff;
        padding: 8px 12px 44px;
        .title {
          display: inline-block;
          max-width: 150px;
          overflow: hidden;
          color: #111;
          font-size: 15px;
          font-weight: 700;
          line-height: 24px;
          text-overflow: ellipsis;
          vertical-align: top;
          white-space: nowrap;
          text-decoration: none;
        }
        .synopsis {
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-wrap: break-word;
          display: -webkit-box;
          position: relative;
          width: 90%;
          max-height: 36px;
          margin-bottom: 8px;
          overflow: hidden;
          color: #666;
          font-size: 12px;
          line-height: 18px;
          text-overflow: ellipsis;
          white-space: normal;
          word-break: break-all;
        }
        .labels {
          position: relative;
          height: 20px;
          overflow: hidden;
          .label {
            display: inline-block;
            max-width: 90px;
            margin-right: 8px;
            padding: 0 8px;
            overflow: hidden;
            border-radius: 20px;
            background: #eee;
            color: #333;
            font-size: 12px;
            letter-spacing: normal;
            line-height: 20px;
            text-align: center;
            text-overflow: ellipsis;
            vertical-align: top;
            white-space: nowrap;
          }
        }
      }
    }
    .video_item {
      width: 260px;
      height: 364px;
      float: left;
      position: relative;
      padding-right: 20px;
      transition: -webkit-transform 0.2s ease;
      transition: transform 0.2s ease;
      transition: transform 0.2s ease, -webkit-transform 0.2s ease;
      .video_coverImg {
        -webkit-filter: brightness(80%);
        filter: brightness(80%);
        border-radius: 4px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
